<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id" @click="$router.push('/detail/'+item.id)">
                <img :src="item.image" alt="">
                <p>{{ item.title }}</p>
                <p>{{ item.price }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import request from '@/uitle/requset'
import { onMounted } from 'vue'
const list = ref([])
onMounted(() => {
//   console.log(`the component is now mounted.`)
request.get('/list',{
    params:{
        pagination:1, pageNum:30
    }
}).then((res)=>{
    if(res.data.code==200){
        list.value=res.data.data
    }
})
})
</script>

<style lang="scss" scoped>
ul{
    column-count: 2;
    li{
        break-inside: avoid;
    }
}
</style>